<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.也不要把canvas想的太复杂，其实canvas也是一个标签，只不过实现他的功能要通过js代码
        2.canvas默认300*150的大小。宽高可以通过width/height属性设置，注意不要通过css设置
     -->
     <!-- 第一步：创建canvas标签 -->
    <canvas width="600" height="500"></canvas>
    <script>
        /*
            canvas是html5新增的标签,应用范围十分广阔
                游戏、图表、广告、图形处理、地图。
                实际案例比如一些网页小游戏、echarts、processon、amap高德地图、百度地图等知名的网站都是canvas做的
        */
        
        // 第二步：获取canvas这个元素对象。获取的方式没有什么特殊的，id、class、标签名都行
        let canvas = document.querySelector('canvas')

        // 第三部：获取渲染上下文对象(画笔)
        var context = canvas.getContext('2d');//这里除了2d，还能写Webgl Webgl2。但是这些难一点，暂时用不到

        // 第四部：绘制图形
        /*
            fillRect()译为填充一个矩形，接收四个参数：
                第一个是这个矩形的左上角距离画布的左边的距离
                第二个是这个矩形的左上角距离画布的上边的距离
                第三个是这个矩形的宽度
                第四个是这个矩形的高度
        */ 
        context.fillRect(100,100,200,200)
       
        
    </script>
</body>
</html>